<template>
  <a-row class="layout flex" type="flex" justify="center" align="middle">
    <div class="login_form">
      <a-form class="form" ref="loginFormRef" layout="labelCol" :rules="loginRules" :model="loginForm" :wrapper-col="wrapperCol">
        <div class="title">后台管理系统登陆</div>
        <a-form-item label="账号:" name="username">
          <a-input v-model:value="loginForm.username" size="middle" />
        </a-form-item>
        <a-form-item label="密码:" name="password">
          <a-input v-model:value="loginForm.password" size="middle" type="password" />
        </a-form-item>
        <a-form-item>
          <a-button class="login" type="primary" size="large" block @click="onSubmit" :loading="loading">登录</a-button>
          <a-button class="clear" size="large" block @click="resetForm">清空</a-button>
        </a-form-item>
        <a-button class="skip" type="link" @click="toRegister">还没有账号，去注册</a-button>
      </a-form>
    </div>
  </a-row>
</template>

<script lang="ts">
import { message } from 'ant-design-vue'
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { get, post } from '../../utils/request/request'
import 'ant-design-vue/es/message/style/css'
//表单的类型
interface formState {
  username: string
  password: string
}
export default defineComponent({
  name: 'login',
  setup() {
    //表单的ref属性
    const loginFormRef = ref()
    const router = useRouter()
    let loading = ref<boolean>(false)

    //登录表单
    const loginForm: formState = reactive({
      username: '',
      password: ''
    })

    //登录验证规则
    const loginRules = {
      username: [
        {
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        },
        { min: 3, max: 18, message: '长度应该在3-18的范围内', trigger: 'blur' }
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        { min: 5, max: 18, message: '长度应该在5-18的范围内', trigger: 'blur' }
      ]
    }

    //提交表单
    const onSubmit = () => {
      loginFormRef.value
        .validate()
        .then(async () => {
          loading.value = true
          try {
            const res: any = await post('/admin/api/v1/login', {
              username: loginForm.username,
              password: loginForm.password
            })
            loading.value = false
            if (res.status_code === 0) {
              message.success('欢迎登录')
              localStorage.setItem('loginTime', new Date().getTime().toString())
              localStorage.setItem('token', res.data.token)
              localStorage.setItem('username', loginForm.username)
              localStorage.setItem('id', res.data.user_id)
              localStorage.setItem('role', res.data.role)
              router.push({ name: 'home' })
            } else {
              message.info('用户名或密码错误')
            }
          } catch {
            message.info('请求失败')
          }
        })
        .catch(() => {
          message.info('请输入完整')
        })
    }

    //清空表单
    const resetForm = () => {
      loginFormRef.value.resetFields()
    }

    //跳转至注册
    const toRegister = async () => {
      let result: any = await get('/admin/api/v1/register/status', '')
      if (result.status_code === 0) {
        router.push({ name: 'register' })
      } else {
        message.info('注册尚未开放')
      }
    }

    return {
      loginFormRef,
      loading,
      loginForm,
      loginRules,
      onSubmit,
      toRegister,
      resetForm,
      labelCol: { span: 5 },
      wrapperCol: { span: 16 }
    }
  }
})
</script>

<style lang="less" scoped>
.login_form {
  padding: 30px 30px 20px 80px;
  background: #fff;
  border-radius: 20px;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  .form {
    width: 100%;
    max-width: 250px;
  }
  .login {
    width: 50%;
    border-radius: 5px;
  }
  .clear {
    width: 50%;
    border-radius: 5px;
    position: absolute;
    left: 135px;
  }
}
.title {
  color: #000;
  padding: 10px 0 20px 0;
  font-size: 29px;
  font-weight: bold;
}
.skip {
  position: relative;
}

.layout {
  height: 500px;
}
</style>
